<template>
<div class="transport-content-box railway-box">
     	<!-- banner图 -->
     	<div class="h-banner">
     	</div>
       	<!-- 热门路线 -->
     	<div class="h-hot-way container-1200">
         		<div class="h-hot-title">
             			<span></span>
             			<span>热门铁路运输线路</span>
             			<img src="./../.././static/img/index/hot.png">
         		</div>
         		<div class="h-hot-city">
              <ul>
                <li v-for="(item,index) in hotLineList" :key="index" @click="changeCity(item)">
                    <!-- <nuxt-link :to="'/transport/list?fromCity='+item.fromCity+'&toCity='+item.toCity"> -->
                      <span>{{item.fromCity}}</span>
                      <span></span>
                      <span>{{item.toCity}}</span>
                    <!-- </nuxt-link> -->
                </li>
              </ul>
         		</div>
     	</div>
    	<!-- 出发城市搜索 -->
     	<div class="h-city-search">
     		 <div class="container-1200">
     		     	<a-form>
                	<a-row :gutter='24' class='city-form'>
                            <a-col :span='8'>
                                <a-form-item label="出发地:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                                      <a-input  placeholder="请选择出发地"  v-model="fromCity" readOnly @click="magSvgShowMap('departureCar')"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span='8'>
                                <a-form-item label="到达地:"  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                                      <a-input  placeholder="请选择车辆到达地" v-model="toCity"  readOnly @click="magSvgShowMap('destinationCar')"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span='8'>
                                      <a-button type="primary" :span='2' style='margin:0 20px 0 70px;'  @click="lineGetSelectLines">搜索</a-button>
                                      <a-button :span='2' @click="reset">重置</a-button>
                            </a-col>
                  </a-row>
               		<a-row :gutter='24' class='types-chose'>
                    <a-col :span='6'>
                        <a-form-item label="运输类型:"  :label-col="{ span: 8}" :wrapper-col="{ span:16 }">
                            <a-select placeholder="全部" :defaultValue="transType" v-model="transType"  @change="transTypeChange">
                              <a-select-option value="">全部</a-select-option>
                              <a-select-option v-for="(item,index) in highwayList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                  </a-row>
     		 	   </a-form>
     		 </div>
     	</div>
     	<!-- 铁路信息 -->
     	<div class="h-information road-detail-content container-1200">
         		<div class="h-info-title">
             			<span></span>
             			<span>铁路信息</span>
         		</div>
        <div class="all-ways">
          <a-list itemLayout="vertical" size="large" :dataSource="listData" :pagination="pagination">
              <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                <div class="road-box-conent">
                      <div class="road-pic">
                          <img :src="item.companyPic||'http://124.207.149.202/wly/static/img/chain/gy1-1.jpg'">
                      </div>
                      <div class="road-name">
                          <span>出发地:<i class="road-city-name">{{item.beginPlace}}</i></span>
                          <span>到达地:<i  class="road-city-name">{{item.endPlace}}</i></span>
                          <span>线路介绍:<i class="road-black wy-text-nowrap">{{item.description ||'暂无'}}</i></span>
                      </div>
                </div>
                <div v-if="item.lineType==2" class="road-box-conent public-road">
                    <div>
                          <p><i class="road-city-name">铁路运输</i></p>
                          <div class="road-railway">
                                <span  class="activ-data">重货价:<i class="road-orange">{{item.weightPriceDisplay}}</i><i v-if="item.weightPriceUnit == null">元/公斤</i><i v-if="item.weightPriceUnit != null">{{item.weightPriceUnitValue}}</i>
                                </span>
                                <span  class="activ-data">轻货价:<i class="road-orange">{{item.volumePriceDisplay}}</i>元/立方米</span>
                                <span class="activ-data">有效期:<i class="road-black road-orange" v-if="item.validDay">{{item.validDay || '暂未输入'}}</i><i v-if="item.validDay">天</i><i class="road-black" v-if="!item.validDay">长期有效</i>
                                </span>
                          </div>
                         
                    </div>
                </div>
                <div class="road-box-conent">
                        <p><i class="road-city-name">{{item.companyName}}</i><b v-if="item.status == 1">推荐</b></p>
                        <div class="useStar">
                            <span>用户星级</span> 
                            <a-rate :defaultValue="item.starLevel" disabled allowHalf />
                            <div class="attestaion">{{item.attestationStatusValue}}</div>
                        </div>
                </div>
                <div class="road-box-conent">
                    <a-button v-if="loggedIn&&loggedUser.attestationStatus==111" class='ant-btn-primary road-sell' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                    <a-button v-if="loggedIn&&loggedUser.attestationStatus!=111" class='ant-btn-primary road-sell' type="primary" @click="TipsShowModal(item.userId)">立即沟通</a-button>
                    <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary road-sell' type="primary">立即沟通</a-button></router-link>
                    <nuxt-link :to="'/transport/'+item.lineId">
                        <a-button class='road-detail'>查看详情</a-button>
                    </nuxt-link>
                </div>
              </a-list-item>
          </a-list>
        </div> 
     	</div>
      <Elastic :userId="userId" ref='elastic'></Elastic>
         <!-- 提示认证弹框 -->
      <Elastics  ref='elastics'></Elastics>
     <!--地图Svg显示位置-->
    <map-svg ref="mapSvgDialog" @change="mapSvgCall" @distance="distanceCall"></map-svg>
</div>
</template>

<script>
import Elastic from '@/components/dialog/Elastic'
import Elastics from '@/components/dialog/Elastics'
import AuthMixin from '~/mixins/auth'
export default {
  mixins: [ AuthMixin ],
  components: {
    Elastic,
    Elastics,
  },
  data() {
    return {
       userId: '',
      // 热门
      hotLineList: [], 
         // 起运地地址
      departureCar: '',
      destinationCar: '',
      // 数据列表
      listData: [],
      fromCity: '',
      toCity: '',
      transType: '',
      highwayList: [],
      // 表格分页
      pagination: {
        pageSizeOptions: ['10', '20', '30', '50', '100'],
        current: 1,
        pageSize: 7,
        // showSizeChanger: true,
        total: 0,
        showTotal: (total, range) => `共 ${total} 条记录`,
        onChange: (page) => {
          this.pagination.current = page
          this.lineGetSelectLines()
        }
      },
    }
  },
   beforeCreate() {
    // this.formCar = this.$form.createForm(this);
  },
  created: function() {
    const _transType = this.$route.query.transType;
    if ( _transType ) this.transType = parseInt(_transType);
    this.infoCommonDict(12);
    this.lineGetLinesHot();
    this.lineGetSelectLines();
  },
  methods: {
      // 弹框
      elasticShowModal(id){
        this.userId = id
        this.$refs.elastic.showModal(id);
      },
      TipsShowModal(id){
          this.$refs.elastics.warning(id);
      },
      // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageNum: 1
          })
          if (res.status) {
            switch(type){
              case 12: this.highwayList = res.data.rows; break;
            }
          } 
      },
      // 重置
      reset (){
        this.transType = '';
        this.departureCar = '';
        this.destinationCar = '';
        this.fromCity = '';
        this.toCity = '';
        this.lineGetSelectLines();
      },
      // 获取热门线路
      async lineGetLinesHot () {
        const res = await this.$store.dispatch('info/lineGetLinesHot',{
          pageSize: 10,
          pageNum: 1,
          hotLine: 1
        })
        if (res.status) {
          this.hotLineList = res.data;
        } 
      },
      // 获取线路列表
      async lineGetSelectLines () {
          const res = await this.$store.dispatch('info/lineGetSelectLines',{
            lineType: 2,
            companyName: this.companyName,
            beginPlace: this.fromCity,
            endPlace: this.toCity,
            transType: this.transType,
            pageSize: 7,
            pageIndex: 1,
          })
          if (res.status && res.data) {
            this.listData = res.data.rows;
            console.log(this.listData,12344444);
            this.pagination.total = res.data.total;
          } else{
            this.listData = [];
            this.pagination.total = 0;
          }
      },
      //热门城市
      changeCity(item){
          this.fromCity = item.beginPlace;
          this.toCity = item.endPlace;
          // this.lineGetSelectLines()
      },
      // 运输类型切换
      transTypeChange(key){
        this.transType = key;
      },
      // 省市地图回调
      mapSvgCall (d) {
        // this[d.name] = d.city;
         this[d.name] = d.provCityArea;
          if(d.name=='departureCar'){
            this.fromCity = d.provCityArea;
          }
          if(d.name=='destinationCar'){
            this.toCity = d.provCityArea;
        }    
      },
      // 起运地
      magSvgShowMap (name) {
        this.$refs.mapSvgDialog.mapSvgVisible( name,2,'','','' );
      },
      // 调用距离返回
      distanceCall (num) {
      }
  }
}
</script>
<style lang="scss">
@import "./../../assets/css/info/roadDetail.scss";
@import "../../assets/css/transport/road.scss";
.railway-box{
    //轮播
    .h-banner{
      background:url('~static/img/transport/transport4.jpg') center top / cover no-repeat;
    }
   .ant-table-column-sorter{
        margin-top:-4px !important;
        right:30px !important;
      }
     th:nth-child(5){
       .anticon-caret-down{
            display:none !important;
        }
     }
     th:nth-child(7){
       .anticon-caret-down{
            display:none !important;
        }
     }
     .road-name{
        margin-top: 20px;
     }
   //出发城市搜索 
   .h-city-search{
     width:100%;
     clear:both;
     height:140px;
     background:#F9F9F9;
     margin-top:30px;
      .ant-form-item-label label{
        font-size:16px;
        color:#333333;
        font-weight:400;
       }
      .ant-form-item-control{
        input{
          font-size:14px;
          height:40px;
        }
       }
     .city-form{
      padding-top:20px;
      .ant-form-item-control{
        width:330px;
        height:40px;
        input{
          width:330px;
        }
      }
     }
     .types-chose{
      .ant-form-item-control{
        width:190px;
        height:40px;
        input{
          width:190px;
        }
        .ant-select-selection{
          width:160px;
            height:40px;
            .ant-select-selection__rendered{
              line-height:40px;
            }
        }
      }
     }
   }
    tr,td,th{
      padding:8px !important;
   }
     //公共样式
  .all-ways {
      .activ-data{
          text-indent: 0em !important;
          margin-left: 28px;
      }
      .road-box-conent:nth-child(2){
          margin-top:4px;
         .road-orange{
               color:#FFA200;
         }
         p{
          line-height:16px;
          margin-bottom:12px;
          text-align: center;
         }
         span{
           margin-bottom:12px;
           text-align: left;
         }
        .seaTime{
            margin-top:16px;
        }
      }
    .road-box-conent:nth-child(3){
          margin-left: 45px;
         .road-city-name{
          vertical-align:middle;
        }
    }
  }
  //公路,铁路
  .public-road{
      width: 170px !important;
      text-align:center;
      margin-left: 25px;
      margin-top: 15px !important;
      .road-railway{
        margin: 0 auto;
        width: 170px;
        //span:nth-child(1){
         //   text-indent: 2em;
       // }
        //span:nth-child(2){
          //  text-indent: 2em;
       // }
      }
  }
}
</style>